<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo"></div>
        <div class="title">
            <span>小米商城</span>
            <p>让每个人都能享受科技的乐趣</p>
        </div>
    </div>
    <div class="center">
        <div class="login">
            <div class="loginheader">
                <span class="account on">账号登录</span>
                <span class="qrcode">扫码登录</span>
            </div>
            <div class="logincontent">
                <div class="account-content">
                    <div class="number">
                        <input type="text" placeholder="邮箱/手机号/小米账号"/>
                        <input type="password" placeholder="密码"/>
                    </div>
                    <div class="submit">
                        <input type="submit" value="立即登录"/>
                    </div>
                    <div class="register">
                        <span class="minumber">注册小米账号</span>
                        <span>|</span>
                        <span class="forget">忘记密码?</span>
                    </div>
                    <div class="login-footer">
                        <div class="other">
                            <hr class="left">
                            <span class="choose">其他方式登录</span>
                            <hr class="right">
                        </div>
                        <div class="icon">
                            <a href="#"><span class="qq"></span></a>
                            <a href="#"><span class="weibo"></span></a>
                            <a href="#"> <span class="pay"></span></a>
                            <a href="#"><span class="vx"></span></a>
                        </div>
                    </div>
                </div>
                <div class="qrcode-content">
                    <img src="images/code.png">
                    <div class="prompt">
                        <span>使用</span>
                        <span class="emphasize">小米商城APP</span>
                        <span>扫一扫</span>
                        <span class="open">小米手机可打开「设置」>「小米帐号」扫码登录</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="question">
            <span class="language">简体</span>
            <span>|</span>
            <span class="language">繁体</span>
            <span>|</span>
            <span class="language">English</span>
            <span>|</span>
            <span class="language">常见问题</span>
        </div>
        <div class="copyright">
            <span>小米公司版权所有京ICP备10046444-</span>
            <span><img src="images/copyright.png"></span>
            <span>京公网安备11010802020134号-京ICP证110507号</span>
        </div>
    </div>
    <script>
        $(".loginheader span").click(function(){
            $(this).addClass("on").siblings().removeClass("on");
            var index = $(this).index();
            console.log(index);
            $(".logincontent>div").eq(index).show().siblings().hide();
        })
    </script>
</body>
</html>